<template>
	<view>
		<view class="block">
			<view class="content">
				<view class="orderinfo">
					<view class="row">
						<view class="nominal">商品名称:</view><view class="text">{{subject}}</view>
					</view>
					<view class="row">
						<view class="nominal">订单金额:</view><view class="text">￥{{total_amount}}元</view>
					</view>
					<view class="row">
						<view class="nominal">详情:</view><view class="text">{{body}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="block">
			<view class="title">
				选择支付方式
			</view>
			<view class="content">
				<view class="pay-list">
					<view class="row" @tap="paytype='alipay'">
						<view class="left">
							<image src="/static/img/alipay.png"></image>
						</view>
						<view class="center">
							支付宝支付
						</view>
						<view class="right">
							<radio :checked="paytype=='alipay'" color="#f06c7a" />
						</view>
					</view>
					<view class="row" @tap="paytype='wxpay'">
						<view class="left">
							<image src="/static/img/wxpay.png"></image>
						</view>
						<view class="center">
							微信支付
						</view>
						<view class="right">
							<radio :checked="paytype=='wxpay'" color="#f06c7a" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pay">
			<view class="btn" @click="payapp">确认支付</view>
			<view class="" style="height: 100rpx;"></view>
			<view class="btn" @click="back">取消订单</view>
			<view class="tis">
				点击立即支付，即代表您同意<view class="terms">
					《条款协议》
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total_amount:'',
				subject:'',
				userId:'',
				proId:'',
				proSchedule:'',
				body:'',
				paytype:'',
				amount:0,
				orderName:'',
				paytype:'alipay'//支付类型
			}
		},
		onLoad:function(option){
			this.subject = option.proName;
			this.userId = option.userId;
			this.proId = option.proId;
			this.proSchedule = option.schedule;
			this.total_amount = option.fund;
			this.body = this.subject+'的'+option.schedule+'阶段的付款';
		},
		methods: {
			payapp: function() {
				if(this.paytype === 'alipay'){
					uni.request({
						url: 'http://'+global.address+":8081/alipay/getAliPayOrderStr",
						data:{
							totalAmount:this.total_amount,
							subject:this.subject,
							userId:this.userId,
							proId:this.proId,
							proSchedule:this.proSchedule,
							body:this.body
						},
						success: (res) => {
							if(res.data == "fail"){
								console.log("失败")
							}else{
								uni.navigateTo({
									url:'pay-webview?path=http://'+global.address+':8081/local.html&data='+encodeURIComponent(res.data)
								})
							}
						}
					})
				}else{
					
				}
			},
			back:function(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss">
	.goodsName{
		margin-top: 30px;
		text-align: center;
		width: 100%;
	}
	.button{
		background-color:#1CBBB4;
		width: 100%;
		margin-right: 0;
		position: fixed;  
		bottom: 45px;
	}
	.button2{
		background-color:#1CBBB4;
		width: 100%;
		margin-right: 0;
		position: fixed;  
		bottom: 0rpx;
	}
	.block{
			width: 94%;
			padding: 0 3% 40upx 3%;
			.title{
				width: 100%;
				font-size: 34upx;
			}
			.content{
				.orderinfo{
					width: 100%;
					border-bottom: solid 1upx #eee;
					.row{
						width: 100%;
						height: 90upx;
						display: flex;
						align-items: center;
						.nominal{
							flex-shrink: 0;
							font-size: 32upx;
							color: #7d7d7d;
						}
						.text{
							width: 70%;
							margin-left: 10upx;
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
							font-size: 32upx;
						}
					}
				}
				.pay-list{
					width: 100%;
					border-bottom: solid 1upx #eee;
					.row{
						width: 100%;
						height: 120upx;
						display: flex;
						align-items: center;
						.left{
							width: 100upx;
							flex-shrink: 0;
							display: flex;
							align-items: center;
							image{
								width: 80upx;
								height: 80upx;
							}
						}
						.center{
							width: 100%;
							font-size: 30upx;
						}
						.right{
							width: 100upx;
							flex-shrink: 0;
							display: flex;
							justify-content: flex-end;
						}
					}
				}
			}
		}
		.pay{
			margin-top: 20upx;
			width: 100%;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			.btn{
				width: 70%;
				height: 80upx;
				border-radius: 80upx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				background-color: #f06c7a;
				box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.2);
			}
			.tis{
				margin-top: 10upx;
				width: 100%;
				font-size: 24upx;
				display: flex;
				justify-content: center;
				align-items: baseline;
				color: #999;
				.terms{
					color: #5a9ef7;
				}
			}
		}
</style>
